<template>
  <div class="class-management">
    <!-- 面包屑 -->
    <el-breadcrumb separator=">" class="breadcrumb">
      <el-breadcrumb-item>课程预约管理系统</el-breadcrumb-item>
      <el-breadcrumb-item>班级管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="content">
      <!-- 左侧学校列表 -->
      <div class="school-list">
        <div
            v-for="(school, index) in schoolList"
            :key="index"
            :class="['school-item', { active: currentSchool === school }]"
            @click="handleSchoolClick(school)"
        >
          {{ school }}
        </div>
      </div>

      <!-- 右侧操作区 + 表格 -->
      <div class="main">
        <!-- 查询表单 -->
        <el-form
            :model="searchForm"
            inline
            class="search-form"
        >
          <el-form-item label="班级名称">
            <el-input
                v-model="searchForm.className"
                placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
                v-model="searchForm.status"
                placeholder="请选择"
            >
              <el-option
                  v-for="(item, idx) in statusOptions"
                  :key="idx"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="handleAddClass">添加班级</el-button>
          </el-form-item>
        </el-form>

        <!-- 班级表格 -->
        <el-table
            :data="classTableData"
            border
            style="width: 100%; margin-top: 20px;"
        >
          <el-table-column
              prop="id"
              label="ID"
              align="center"
          />
          <el-table-column
              prop="className"
              label="班级名称"
              align="center"
          />
          <el-table-column
              prop="classTeacher"
              label="班主任"
              align="center"
          />
          <el-table-column
              prop="status"
              label="状态"
              align="center"
          />
          <el-table-column
              label="操作"
              align="center"
          >
            <template #default="scope">
              <el-button
                  type="primary"
                  text
                  @click="handleEdit(scope.row)"
              >编辑</el-button>
              <el-button
                  :type="scope.row.status === '启用' ? 'warning' : 'success'"
                  text
                  @click="handleStatusChange(scope.row)"
              >{{ scope.row.status === '启用' ? '禁用' : '启用' }}</el-button>
              <el-button
                  type="danger"
                  text
                  @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 若用 Vue 2，需改为 import { reactive, Vue } from 'vue' 等写法，且语法调整为选项式 API

// 学校列表数据
const schoolList = ref(['学校1', '学校2', '学校3', '学校4', '学校5', '学校6', '学校7', '学校8'])
// 当前选中学校
const currentSchool = ref('学校1')

// 查询表单数据
const searchForm = ref({
  className: '',
  status: ''
})
// 状态下拉选项
const statusOptions = ref([
  { label: '请选择', value: '' },
  { label: '启用', value: '启用' },
  { label: '禁用', value: '禁用' }
])

// 班级表格数据
const classTableData = ref([
  { id: 11, className: '班级1', classTeacher: '张三', status: '启用' },
  { id: 10, className: '班级2', classTeacher: '李四', status: '禁用' }
])

// 切换学校
const handleSchoolClick = (school) => {
  currentSchool.value = school
  // 可在此处根据学校请求对应班级数据，示例直接写死数据，实际需调接口
  console.log('切换到：', school)
}

// 查询
const handleSearch = () => {
  // 实际需根据 searchForm 调接口查询班级列表
  console.log('查询条件：', searchForm.value)
  // 这里可模拟请求后更新 classTableData
}

// 重置
const handleReset = () => {
  searchForm.value.className = ''
  searchForm.value.status = ''
}

// 添加班级
const handleAddClass = () => {
  // 可弹出弹窗填写班级信息，然后调接口新增
  console.log('点击添加班级')
}

// 编辑班级
const handleEdit = (row) => {
  // 可弹出弹窗，带 row 数据进行编辑
  console.log('编辑：', row)
}

// 切换状态（启用/禁用）
const handleStatusChange = (row) => {
  row.status = row.status === '启用' ? '禁用' : '启用'
  // 实际需调接口更新状态
  console.log('状态变更：', row)
}

// 删除班级
const handleDelete = (row) => {
  // 可提示确认，然后调接口删除，再更新表格数据
  console.log('删除：', row)
  const index = classTableData.value.findIndex(item => item.id === row.id)
  if (index !== -1) {
    classTableData.value.splice(index, 1)
  }
}
</script>

<style scoped>
.class-management {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.content {
  display: flex;
}

.school-list {
  width: 160px;
  margin-right: 20px;
}

.school-item {
  padding: 12px;
  text-align: center;
  background: #eaeaea;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 4px;
}

.school-item.active {
  background: #409eff;
  color: #fff;
}

.main {
  flex: 1;
}

.search-form {
  margin-bottom: 10px;
}
</style>